<template>
  <div class="novel-detail-view">
    <!-- 小说信息栏 -->
    <div class="novel-info-bar" v-if="selectedNovel">
      <div class="novel-breadcrumb">
        <el-button type="text" @click="emit('backToNovels')" class="back-btn">
          <el-icon><Position style="transform: rotate(180deg);" /></el-icon>
          {{ t('novel.backToNovels') }}
        </el-button>
        <span class="breadcrumb-separator">></span>
        <span class="current-novel">{{ selectedNovel.title }}</span>
      </div>
      <div class="novel-brief">
        <div class="brief-icon" :style="briefIconStyle">
          <img v-if="selectedNovel.cover_image" :src="selectedNovel.cover_image" :alt="selectedNovel.title" class="brief-cover-img" />
          <span v-else class="brief-icon-text">{{ selectedNovel.icon }}</span>
        </div>
        <div class="brief-info">
          <h3>{{ selectedNovel.title }}</h3>
          <p>{{ selectedNovel.description }}</p>
        </div>
      </div>
    </div>

    <div class="chat-layout">
      <!-- 左侧：角色选择面板 -->
      <div class="character-selection-panel">
        <div class="panel-header">
          <h3>{{ t('novel.selectCharacter') }}</h3>
          <p>{{ t('novel.clickToStartChat') }}</p>
        </div>
        
        <!-- 角色列表 -->
        <div class="characters-list" v-if="selectedNovel?.characters && selectedNovel.characters.length > 0">
          <CharacterItem
            v-for="character in selectedNovel.characters"
            :key="character.id"
            :character="character"
            :isSelected="selectedCharacter?.id === character.id"
            @select="handleCharacterSelect"
            @toggleFavorite="emit('toggleCharacterFavorite', $event)"
          />
        </div>
        
        <!-- 选择提示 -->
        <div class="selection-prompt">
          <div class="prompt-content">
            <div class="prompt-icon">✨</div>
            <h3>{{ t('novel.discoverCharacters') }}</h3>
            <p>{{ t('novel.clickToExplore') }}</p>
            <div class="prompt-stats" v-if="selectedNovel">
              <div class="stat-item">
                <span class="stat-number">{{ selectedNovel.characters?.length || 0 }}</span>
                <span class="stat-label">{{ t('novel.characters') }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ selectedNovel.chapters }}</span>
                <span class="stat-label">{{ t('novel.chapters') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：对话区域 -->
      <ChatPanel
        :selectedCharacter="selectedCharacter"
        :messages="messages"
        :isThinking="isThinking"
        :inputMessage="inputMessage"
        :username="username"
        @clearMessages="emit('clearMessages')"
        @exportChat="emit('exportChat')"
        @playAudio="emit('playAudio', $event)"
        @likeMessage="emit('likeMessage', $event)"
        @updateInput="emit('updateInput', $event)"
        @insertEmoji="emit('insertEmoji')"
        @uploadFile="emit('uploadFile')"
        @sendMessage="emit('sendMessage')"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { Position } from '@element-plus/icons-vue'
import type { Novel, Character, LegacyCharacter, Message } from '../../types/novel'
import CharacterItem from '../chat/CharacterItem.vue'
import ChatPanel from '../chat/ChatPanel.vue'

interface Props {
  selectedNovel: Novel | null
  selectedCharacter: Character | LegacyCharacter | null
  messages: Message[]
  isThinking: boolean
  inputMessage: string
  username?: string
}

const props = defineProps<Props>()
const { t } = useI18n()

// 计算简介图标样式
const briefIconStyle = computed(() => {
  if (props.selectedNovel?.cover_image) {
    return {}
  }
  return { background: props.selectedNovel?.gradient }
})

const emit = defineEmits<{
  backToNovels: []
  showCharacterModal: [character: Character | LegacyCharacter]
  toggleCharacterFavorite: [id: number]
  clearMessages: []
  exportChat: []
  playAudio: [message: Message]
  likeMessage: [message: Message]
  updateInput: [value: string]
  insertEmoji: []
  uploadFile: []
  sendMessage: []
}>()

const handleCharacterSelect = (character: Character | LegacyCharacter) => {
  emit('showCharacterModal', character)
}
</script>

<script lang="ts">
export default {
  name: 'NovelDetailView'
}
</script>

<style scoped>
.novel-detail-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.novel-info-bar {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 20px 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.novel-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.back-btn {
  color: #667eea;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.back-btn:hover {
  background: #f0f4ff;
}

.breadcrumb-separator {
  color: #9ca3af;
  font-weight: 500;
}

.current-novel {
  color: #374151;
  font-weight: 600;
}

.novel-brief {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brief-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  position: relative;
  overflow: hidden;
}

.brief-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.brief-icon-text {
  font-size: 24px;
}

.brief-info h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
}

.brief-info p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.chat-layout {
  display: grid;
  grid-template-columns: 400px 1fr;
  height: 100%;
  flex: 1;
}

.character-selection-panel {
  background: white;
  border-right: 1px solid #e4e7ed;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.panel-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
}

.panel-header p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.characters-list {
  flex: 1;
  padding: 16px;
}

.selection-prompt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.prompt-content {
  text-align: center;
  max-width: 300px;
}

.prompt-icon {
  font-size: 64px;
  margin-bottom: 24px;
  animation: sparkle 3s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% { 
    transform: scale(1) rotate(0deg); 
    filter: brightness(1);
  }
  50% { 
    transform: scale(1.1) rotate(10deg); 
    filter: brightness(1.2);
  }
}

.prompt-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
}

.prompt-content p {
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 24px;
}

.prompt-stats {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 20px;
}

.prompt-stats .stat-item {
  text-align: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea20, #764ba220);
  border-radius: 16px;
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
}

.prompt-stats .stat-item:hover {
  transform: translateY(-2px);
  border-color: #667eea;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.prompt-stats .stat-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 4px;
}

.prompt-stats .stat-label {
  font-size: 12px;
  color: #6b7280;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .chat-layout {
    grid-template-columns: 350px 1fr;
  }
}

@media (max-width: 768px) {
  .novel-info-bar {
    padding: 16px 20px;
  }
  
  .chat-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 300px 1fr;
  }
  
  .character-selection-panel {
    max-height: 300px;
  }
}
</style> 